<template>
  <v-menu
    v-model="isOpen"
    :close-on-back="true"
    :close-on-content-click="true"
    location="bottom end"
    :offset="8"
    :persistent="false"
  >
    <template #activator="{ props }">
      <slot name="activator" :props="props" />
    </template>

    <v-list slim>
      <v-list-item @click="onSelect('new-tab')">
        <template #prepend>
          <v-icon :icon="mdiPlus" size="18" />
        </template>
        <v-list-item-title data-testid="item-menu-newTab">{{ t('menu.newTab') }}</v-list-item-title>
        <template #append>
          <v-hotkey v-if="kNewTab" class="ml-6" :keys="kNewTab" variant="text"></v-hotkey>
        </template>
      </v-list-item>
      <v-list-item @click="onSelect('new-window')">
        <template #prepend>
          <v-icon :icon="mdiOpenInNew" size="18" />
        </template>
        <v-list-item-title data-testid="item-menu-newWindow">{{
          t('menu.newWindow')
        }}</v-list-item-title>
      </v-list-item>
      <v-divider class="my-1" />
      <v-list-item @click="onSelect('history')">
        <template #prepend>
          <v-icon :icon="mdiHistory" size="18" />
        </template>
        <v-list-item-title data-testid="item-menu-history">{{
          t('menu.history')
        }}</v-list-item-title>
      </v-list-item>
      <v-list-item @click="onSelect('password-manager')">
        <template #prepend>
          <v-icon :icon="mdiShieldKey" size="18" />
        </template>
        <v-list-item-title data-testid="item-menu-passwordManager">{{
          t('menu.passwordManager')
        }}</v-list-item-title>
      </v-list-item>
      <v-list-item @click="onSelect('process')">
        <template #prepend>
          <v-icon :icon="mdiMemory" size="18" />
        </template>
        <v-list-item-title data-testid="item-menu-processMonitor">{{
          t('menu.processMonitor')
        }}</v-list-item-title>
      </v-list-item>
      <v-list-item @click="onSelect('settings')">
        <template #prepend>
          <v-icon :icon="mdiCog" size="18" />
        </template>
        <v-list-item-title data-testid="item-menu-settings">{{
          t('menu.settings')
        }}</v-list-item-title>
        <template #append>
          <v-hotkey v-if="kSettings" :keys="kSettings" variant="text"></v-hotkey>
        </template>
      </v-list-item>
      <v-list-item @click="onSelect('updater')">
        <template #prepend>
          <v-icon :icon="mdiUpdate" size="18" />
        </template>
        <v-list-item-title data-testid="item-menu-updater">{{
          t('menu.updater')
        }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useLayoutStore } from '@/windows/layoutBrowser/stores/layout'
import { useShortcut } from '@/composables/useShortcut'
import {
  mdiCog,
  mdiHistory,
  mdiMemory,
  mdiOpenInNew,
  mdiPlus,
  mdiShieldKey,
  mdiUpdate
} from '@mdi/js'
import { getSystemTab } from '~shared/utils/tab'
import { TAB_IDS } from '~shared/constants'
import { useTabStore } from '@/windows/layoutBrowser/stores/tab'
import { VHotkey } from 'vuetify/labs/VHotkey'

const { t } = useI18n()
const layoutStore = useLayoutStore()
const tabStore = useTabStore()

// 类型安全的快捷键获取，只获取实际存在的快捷键
const kNewTab = useShortcut('cmd:tab:new')
const kSettings = useShortcut('cmd:settings:open')

const isOpen = computed({
  get() {
    return (layoutStore as any).showAddressBarMainMenu ?? false
  },
  set(v: boolean) {
    ;(layoutStore as any).showAddressBarMainMenu = v
  }
})

function onSelect(
  key:
    | 'new-tab'
    | 'new-window'
    | 'history'
    | 'password-manager'
    | 'settings'
    | 'process'
    | 'updater'
) {
  // 默认内置行为（与现有架构集成）
  switch (key) {
    case 'new-tab': {
      _pre_.browser.addTab()
      break
    }
    case 'new-window': {
      _pre_.browser.create()
      break
    }
    case 'history': {
      tabStore.openTab(getSystemTab(TAB_IDS.HISTORY, { autoFocus: true }))
      break
    }
    case 'password-manager': {
      tabStore.openTab(
        getSystemTab(TAB_IDS.SETTINGS, {
          autoFocus: true,
          url: 'f2://settings#/password-manager',
          title: t('menu.passwordManager')
        })
      )
      break
    }
    case 'settings': {
      tabStore.openTab(getSystemTab(TAB_IDS.SETTINGS, { autoFocus: true }))
      break
    }
    case 'process': {
      tabStore.openTab(getSystemTab(TAB_IDS.PROCESS_MONITOR, { autoFocus: true }))
      break
    }
    case 'updater': {
      _pre_.browser.addTab(getSystemTab(TAB_IDS.UPDATER), 'right')
      break
    }
  }
  isOpen.value = false
}
</script>

<i18n>
{
  "zhHans": {
    "menu": {
      "newTab": "新建标签页",
      "newWindow": "新建窗口",
      "history": "历史记录",
      "passwordManager": "密码管理器",
      "processMonitor": "进程监控",
      "settings": "设置",
      "updater": "检查更新"
    }
  },
  "en": {
    "menu": {
      "newTab": "New Tab",
      "newWindow": "New Window",
      "history": "History",
      "passwordManager": "Password Manager",
      "processMonitor": "Process Monitor",
      "settings": "Settings",
      "updater": "Check for Updates"
    }
  }
}
</i18n>
